<template>
  <el-row>
    <el-col>
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="选项内容">
          <el-input v-model="option.optionContent" placeholder="请输入选项内容"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="option.status" placeholder="状态筛选">
            <el-option label="全部" value="null"></el-option>
            <el-option label="停用" value="1"></el-option>
            <el-option label="未停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="reset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <el-row>
    <el-col>
        <el-button type="success" :icon="Plus" @click="addDialog = true">
          新增
        </el-button>
        <el-button type="danger" :icon="Delete">
          删除
        </el-button>
    </el-col>
  </el-row>

  <el-row>
    <el-col>
      &nbsp;
    </el-col>
  </el-row>

  <el-row>
    <el-col>
      <el-table :data="data" style="width: 100%"
                height="330"
                header-cell-style="background:#f8f8f9;color:#535a6c"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" sortable label="选项编号" />
        <el-table-column prop="optionContent" sortable label="选项内容" />
        <el-table-column prop="status" sortable label="选项状态" >
          <template #default="scope">
            <StatusTag :status="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column fixed="right" prop="operate" label="操作" >
          <template #default="scope">
            <el-button-group>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑此选项"
                  placement="top"
              >
                <el-button type="primary" :icon="Edit" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除此选项"
                  placement="top"
              >
                <el-button :icon="Delete" type="danger" size="small" @click="fakeDelete(scope.row.id)"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="停用此选项"
                  placement="top"
              >
                <el-button type="warning" size="small" :icon="Remove"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-dialog v-model="addDialog" title="添加选项" width="400px" center>
    <AddOption></AddOption>
  </el-dialog>

</template>

<script setup>
import {Search,Refresh,Plus,Edit,Delete,Remove} from '@element-plus/icons-vue'
import AddOption from "@/view/option/AddOption";

</script>
<script>
import StatusTag from "@/components/table/StatusTag";
import {fakeDeleteOption, selectAllOption} from "@/api/option";
const {ElMessage} = require("element-plus");

export default {
  name: "OptionPage",
  components:{StatusTag},
  data() {
    return {
      data: '',
      addDialog:false,
      option:{
        optionContent: '',
        status: ''
      }
    }
  },
  mounted() {
    this.getOption();
  },
  methods: {
    async getOption() {
      const t = await selectAllOption();
      this.data = t.data.data
    },
    async fakeDelete(id){
      const t = await fakeDeleteOption(id);
      if(t.data.code === 200){
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      }
    }
  },
  computed: {
    getData() {
      return this.data;
    }
  }
}
</script>

<style scoped>

</style>